import L from 'leaflet'
import 'leaflet-editable' // 引入Leaflet.Editable插件的JavaScript文件
// import 'leaflet-editable/dist/leaflet.editable.css'; // 引入Leaflet.Editable插件的CSS文件（如果插件包含CSS文件的话，具体路径可能有所不同）

import markerIcon from '/static/icon/marker.png'

/**
 * 地图默认配置
 */
const defaultOptions = {
  // TODO 加了这个就展示不了了 坐标系统配置不正确或者图层与坐标系统不匹配导致的
  // crs: L.CRS.EPSG4326, // WGS84地理坐标系 高德系坐标
  center: [30.24723, 120.14036],
  zoom: 13,
  maxZoom: 18,
  // layers: [],
}

const imageURLs = {
  // 浙江水利影像底图_2019
  YingXiang: 'https://sldtpt.slt.zj.gov.cn/adaptor/ZJSKDBJC/ZJRasterMap',
  // ArcGIS瓦片服务
  // ShuiLi: 'https://sldtpt.slt.zj.gov.cn/adaptor/ZJSKDBJC/shuiku3',
  ShuiLi:
    'https://t0.tianditu.gov.cn/img_w/wmts?' +
    'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles' +
    '&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' +
    'd121ee3771834c4f92c6ae2b98c1f11a',
}
const defaultImageURL = imageURLs.ShuiLi

const initMap = (id = 'map', options = defaultOptions) => {
  return L.map(id, {
    ...defaultOptions,
    ...options,
  }).setView([29.43040698, 118.3172951], 12);
}

export default class MyMap {
  #markerGroup = null
  // 创建 polygon group
  #polygonGroup = null
  #polylineGroup = null
  
  constructor ({ id = 'map', options = defaultOptions } = {}) {
    this.L = L
    this.map = initMap(id, options)
    this.#markerGroup = L.layerGroup().addTo(this.map)
    this.#polygonGroup = L.layerGroup().addTo(this.map)
    this.#polylineGroup = L.layerGroup().addTo(this.map)
  }
  
  setPanTo(lat, lng){
    this.map.panTo([lat, lng])
  }
  tileLayer (imageURL = defaultImageURL) {
    L.tileLayer(imageURL).addTo(this.map)
  }
  
  tileLayerChange (imageURL = defaultImageURL) {
    this.map.setUrl(imageURL)
  }
  
  moveToPoint (lat, lng) {
    this.map.setView([lat, lng])
  }
  
  
  addFeatureGroup () {
    return L.featureGroup().addTo(this.map)
  }
  
  addMarker (lat, lng, options = {}) {
    if (!options.icon) {
      options.icon = this.setIcon({
        // iconUrl: 'http://webapi.amap.com/theme/v1.3/markers/n/start.png', // 起点图标的URL
        iconUrl: markerIcon,
        iconSize: [25, 41], // 图标的大小
        iconAnchor: [12.5, 41], // 图标的锚点位置
        // popupAnchor: [0, -32], // 弹出窗口的锚点位置
      })
    }
    return L.marker([lat, lng], options).addTo(this.#markerGroup)
  }
  
  removeMarker (marker) {
    marker.remove()
  }
  
  clearMarkers () {
    this.#markerGroup.clearLayers()
  }
  
  setIcon (options) {
    return L.icon(options)
  }
  
  setDivIcon (options) {
    return L.divIcon(options)
  }
  
  addPolyline (latlngs, options = {}) {
    return L.polyline(latlngs, options).addTo(this.#polylineGroup)
  }
  clearPolylines () {
    this.#polylineGroup.clearLayers()
  }
  
  
  addPolygon (latlngs, options = {}) {
    return L.polygon(latlngs, options).addTo(this.#polygonGroup)
  }
  
  clearPolygons () {
    this.#polygonGroup.clearLayers()
  }
  
  onEvent (obj = map, func, handler) {
    obj.on(func, handler)
  }
  
  offEvent (obj = map, func, handler) {
    if (handler) {
      obj.off(func, handler)
    } else {
      obj.off(func)
    }
  }
  
  
  enableEdit (layer) {
    layer.enableEdit()
    layer.on('dblclick', L.DomEvent.stop).on('dblclick', layer.toggleEdit)
  }
  
  // 不要了，换下面的
  addEditControl () {}
  
  addControlWithEditPolyline () {
    L.EditControl = L.Control.extend({
      options: {
        position: 'topleft',
        callback: null,
        kind: '',
        html: '',
      },
      
      onAdd: function (map) {
        var container = L.DomUtil.create('div',
            'leaflet-control leaflet-bar leaflet-editable-bar'),
          link = L.DomUtil.create('a', '', container)
        
        link.href = '#'
        link.title = '新增' + this.options.kind
        link.innerHTML = this.options.html
        L.DomEvent.on(link, 'click', L.DomEvent.stop).on(
          link,
          'click',
          function () {
            window.LAYER = this.options.callback.call(map.editTools)
          },
          this,
        )
        
        return container
      },
    })
    
    L.NewPolylineControl = L.EditControl.extend({
      options: {
        position: 'topleft',
        callback: this.map.editTools.startPolyline,
        kind: '轨迹',
        html: '\\/\\',
        // html: '轨迹',
      },
    })
    
    const _control = new L.NewPolylineControl()
    
    this.map.addControl(_control)
    
    return _control
  }
  
  removeControl (control) {
    this.map.removeControl(control)
  }
}
